<template>
	<view class="about-page">
		<!-- 自定义头部 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container" @click="closePage()">
					<view class="back-btn">
						<text class="cuIcon-back"></text>
					</view>
					<view class="page-title">
						关于我们
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 品牌信息卡片 -->
			<view class="brand-card">
				<view class="brand-logo">
					<image :src="`${config.commonUrl}/logo-orange.png`" class="logo-image" mode="aspectFit" />
				</view>
				<view class="brand-info">
					<text class="brand-name">{{config.name}}</text>
					<text class="brand-slogan">让邻里生活更美好</text>
				</view>
				<view class="version-info">
					<!-- #ifdef APP-PLUS -->
					<text class="version-text">Version {{localVersion.version}}</text>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<text class="version-text">小程序版本: {{localVersion.version}} {{ localVersion.envVersion}}</text>
					<!--  #endif -->
				</view>
			</view>

			<!-- 功能菜单 -->
			<view class="menu-section">
				<view class="menu-header">
					<view class="menu-icon">
						<text class="cuIcon-settings"></text>
					</view>
					<text class="menu-title">平台信息</text>
				</view>

				<view class="menu-list">
					<view class="menu-item" v-for="(item, index) in menuList" :key="index"
						@click="navigateTo(item.url)">
						<view class="item-content">
							<view class="item-icon">
								<text :class="item.icon"></text>
							</view>
							<view class="item-info">
								<text class="item-title">{{item.title}}</text>
								<text class="item-desc">{{item.desc}}</text>
							</view>
						</view>
						<view class="item-arrow">
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 联系信息 -->
			<view class="contact-section">
				<view class="contact-header">
					<view class="contact-icon">
						<text class="cuIcon-phone"></text>
					</view>
					<text class="contact-title">联系我们</text>
				</view>

				<view class="contact-list">
					<view class="contact-item">
						<view class="contact-label">
							<text class="label-icon">📞</text>
							<text class="label-text">客服热线</text>
						</view>
						<text class="contact-value">{{config.customerServiceMobile}}</text>
					</view>

					<view class="contact-item">
						<view class="contact-label">
							<text class="label-icon">📧</text>
							<text class="label-text">客服邮箱</text>
						</view>
						<text class="contact-value">{{config.customerServiceEmail}}</text>
					</view>

					<view class="contact-item">
						<view class="contact-label">
							<text class="label-icon">🏢</text>
							<text class="label-text">公司地址</text>
						</view>
						<text class="contact-value">广州市增城区朱村大道西108号102房</text>
					</view>
				</view>
			</view>

			<!-- 版权信息 -->
			<view class="copyright-section">
				<view class="copyright-links">
					<text class="link-text" @click="navigateTo('/pages/mePages/about/userAgreement')">
						《{{config.name}}用户协议》
					</text>
				</view>
				<view class="copyright-info">
					<text class="copyright-text">CopyRight © {{new Date().getFullYear()}} {{config.name}}</text>
					<text class="copyright-desc">广州擎域网络科技有限公司 版权所有</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import config from '@/config/config';

	export default {
		components: {
			headerSlot,
		},
		data() {
			return {
				config,
				IosWhether: false, //是否是ios
				editionHistory: [], //版本历史
				versionData: {}, //版本信息
				localVersion: "1.0.0", //当前版本信息
				logo: "",
				params: {
					page: 1,
					limit: 5,
				},
				menuList: [{
						title: '证照信息',
						desc: '查看平台相关证照',
						icon: 'cuIcon-idcard',
						url: '/pages/mePages/about/certificate'
					},
					{
						title: '服务协议',
						desc: '平台服务条款',
						icon: 'cuIcon-form',
						url: '/pages/mePages/about/agreement'
					},
					{
						title: '隐私协议',
						desc: '个人信息保护政策',
						icon: 'cuIcon-lock',
						url: '/pages/mePages/about/privacy'
					},
					{
						title: '关于我们',
						desc: '了解更多平台信息',
						icon: 'cuIcon-info',
						url: '/pages/mePages/about/aboutUs'
					},

				]
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			const accountInfo = wx.getAccountInfoSync();
			this.version_number = accountInfo.miniProgram.version // 小程序 版本号
			this.localVersion = {
				versionCode: accountInfo.miniProgram.version.replace(/\./g, ""),
				version: accountInfo.miniProgram.version, // 小程序 版本号,
				envVersion: accountInfo.miniProgram.envVersion, //判断小程序是开发版本还是release版本
			};
			// #endif
		},
		methods: {
			closePage() {
				// 使用navigateBack保持路由栈，避免清空导致无法返回
				uni.navigateBack({
					delta: 1
				});
			},
			navigateTo(url) {
				this.$router.smartNavigate(url);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.about-page {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.header-container {
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		width: 100%;
		height: 88rpx;

		.back-btn {
			margin-right: 20rpx;
			padding: 8rpx;

			.cuIcon-back {
				font-size: 36rpx;
				color: #2C2622;
			}
		}

		.page-title {
			font-weight: 600;
			font-size: 36rpx;
			color: #2C2622;
		}
	}

	.content-container {
		padding: 32rpx;
	}

	.brand-card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 48rpx 32rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		text-align: center;

		.brand-logo {
			margin-bottom: 24rpx;

			.logo-image {
				width: 160rpx;
				height: 80rpx;
			}
		}

		.brand-info {
			margin-bottom: 24rpx;

			.brand-name {
				font-size: 36rpx;
				font-weight: 600;
				color: #2C2622;
				margin-bottom: 8rpx;
				display: block;
			}

			.brand-slogan {
				font-size: 28rpx;
				color: #8F97A2;
				line-height: 1.4;
			}
		}

		.version-info {
			.version-text {
				font-size: 26rpx;
				color: #8F97A2;
				background: #f8f9fa;
				padding: 12rpx 24rpx;
				border-radius: 20rpx;
				display: inline-block;
			}
		}
	}

	.menu-section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.menu-header {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;

			.menu-icon {
				width: 48rpx;
				height: 48rpx;
				background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				.cuIcon-settings {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.menu-title {
				font-size: 32rpx;
				color: #2C2622;
				font-weight: 600;
			}
		}

		.menu-list {
			.menu-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #f5f5f5;
				transition: all 0.2s;

				&:last-child {
					border-bottom: none;
				}

				&:active {
					background: #f8f9fa;
					border-radius: 12rpx;
					margin: 0 -12rpx;
					padding: 24rpx 12rpx;
				}

				.item-content {
					display: flex;
					align-items: center;
					flex: 1;

					.item-icon {
						width: 48rpx;
						height: 48rpx;
						background: #f8f9fa;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 16rpx;

						text {
							font-size: 24rpx;
							color: #FE6100;
						}
					}

					.item-info {
						flex: 1;

						.item-title {
							font-size: 28rpx;
							color: #2C2622;
							font-weight: 500;
							margin-bottom: 4rpx;
							display: block;
						}

						.item-desc {
							font-size: 24rpx;
							color: #8F97A2;
						}
					}
				}

				.item-arrow {
					.cuIcon-right {
						font-size: 24rpx;
						color: #c0c4cc;
					}
				}
			}
		}
	}

	.contact-section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.contact-header {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;

			.contact-icon {
				width: 48rpx;
				height: 48rpx;
				background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				.cuIcon-phone {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.contact-title {
				font-size: 32rpx;
				color: #2C2622;
				font-weight: 600;
			}
		}

		.contact-list {
			.contact-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.contact-label {
					display: flex;
					align-items: center;

					.label-icon {
						font-size: 24rpx;
						margin-right: 12rpx;
					}

					.label-text {
						font-size: 28rpx;
						color: #606266;
					}
				}

				.contact-value {
					font-size: 28rpx;
					color: #2C2622;
					font-weight: 500;
				}
			}
		}
	}

	.copyright-section {
		text-align: center;
		padding: 32rpx 0;

		.copyright-links {
			margin-bottom: 24rpx;

			.link-text {
				font-size: 28rpx;
				color: #FE6100;
				text-decoration: underline;
			}
		}

		.copyright-info {
			.copyright-text {
				font-size: 26rpx;
				color: #8F97A2;
				margin-bottom: 8rpx;
				display: block;
			}

			.copyright-desc {
				font-size: 24rpx;
				color: #c0c4cc;
			}
		}
	}
</style>